<template>
  <div class="main">
    <div class="mainTitle">
      <h2>首页顶部轮播图管理</h2>
      <div>
        <el-button type="primary" icon="el-icon-plus" @click="add"
          >新增</el-button
        >
      </div>
    </div>
    <TableList
      :loading="loading"
      :tabledata="tableData"
      :tabledatacolumn="tableDataColumn"
      :isshow="false"
    >
      <template v-slot:default="info">
        <el-button type="text" @click="handleEdit(info.info)">编辑</el-button>
        <el-button type="text" @click="deleteRow(info.info)">删除</el-button>
      </template>
    </TableList>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="50%" :close-on-click-modal="false">
      <Form
        :formdata="formdata"
        :formobj="formobj"
        ref="bannerForm"
        :formrules="formrules"
      ></Form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import Form from "@/components/form.vue";
import TableList from "@/components/TableList.vue";
import {
  bannerApiAdd,
  bannerApiqueryAll,
  bannerApiEdit,
  bannerApiqueryOne,
  bannerApidelete,
} from "@/api/webpage";
export default {
  name: "bannerManager",
  components: {
    TableList,
    Form,
  },
  data() {
    return {
      loading:true,
      title: "",
      dialogVisible: false,
      tableData: [],
      tableDataColumn: [
        { label: "标题", key: "name" },
        { label: "key", key: "type" },
        { label: "图片", key: "picurl", type: "image", srclist:[] },
      ],
      formdata: {},
      formobj: [
        { label: "标题", key: "name", type: "input" },
       /* { label: "key", key: "type", type: "input" },*/
        { label: "链接", key: "thumbnailUrl", type: "input" },
        { label: "图片", key: "url", type: "pic" },
        // { label: "移动端图片", key: "thumbnailUrl", type: "pic" },
      ],
      formrules: {
        name: [{ required: true, message: "请输入标题", trigger: "blur" }],
        type: [{ required: true, message: "请输入别名", trigger: "blur" }],
        url: { required: true, message: "请上传", trigger: "change" },
        // thumbnailUrl: { required: false, message: "请上传", trigger: "change" },
      },
      type: "increased",
      rowId: "",
    };
  },
  created() {
    this.getlist();
  },
  methods: {
    deleteRow(row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let ids= []
          ids.push(row.id)
          bannerApidelete(ids)
            .then((res) => {
              if (res.code == 0) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                this.getlist();
              }
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .catch(() => {});
    },
    add() {
      this.title = "新增";
      this.type = "increased",
      this.dialogVisible = true;
    },
    handleEdit(row) {
      this.title = "编辑";
      this.type = "edit";
      this.rowId = row.id;
      this.dialogVisible = true;
      this.getdata(row.id);
    },
    getdata(id) {
      bannerApiqueryOne({ id: id })
        .then((res) => {
          if (res.code == 0) {
            this.formdata = res.data
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 获取列表
    getlist() {
      bannerApiqueryAll({ type: "indexbanner" })
        .then((res) => {
          if (res.code == 0) {
            this.loading= false
            let array = []
            this.tableData = res.data.map(item=>{
              item.picurl = '/show'+item.url
              array.push('/show'+item.url)
              return item
            })

          this.tableDataColumn[2].srclist = array
          // console.log('3323',this.tableDataColumn[2].srclist);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    submit() {;
      this.$refs.bannerForm.getData().then((res) => {
        console.log("数据格式：",this.formdata)
        console.log("子组件中的数据格式：",res)
        if (this.type == "edit") {
          res.id = this.rowId;
          res.type="indexbanner";
          bannerApiEdit(res)
            .then((response) => {
              if (response.data == 1) {
                this.$message.success("成功");
                this.dialogVisible = false;
                this.getlist();
                this.$refs.bannerForm.resetForm();
                this.$refs.bannerForm.clearValidate();
              } else {
                this.$message.error("失败");
              }
            })
            .catch((err) => {
              console.log(err);
            });
        } else {
          res.type="indexbanner";
          bannerApiAdd(res)
            .then((response) => {
              if (response.data == 1) {
                this.$message.success("成功");
                this.dialogVisible = false;
                this.getlist();
                this.$refs.bannerForm.resetForm();
                this.$refs.bannerForm.clearValidate();
              } else {
                this.$message.error("失败");
              }
            })
            .catch((err) => {
              console.log(err);
            });
        }
        /*this.$nextTick(()=>{
          this.formdata = {}
        })*/
      });
    },
    cancel() {
      this.dialogVisible = false;
      this.$refs.bannerForm.resetForm();
      this.$refs.bannerForm.clearValidate();
    },
  },
};
</script>
<style scoped>
@import "~@/assets/css/adminstyle.css";
</style>

